<template>
  <div class="about">
    <!-- <h1 @click="goHome">{{msg}}</h1> -->
    <div class="margbox">
      <div class="imgbox" v-for="item in human" :key="item.people.name">
        <img :src="retImg(item.people)" alt="item.people.name" @click="goHome(item.people.name)">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name:'about',
  data(){
    return{
      msg:'This is an about page',
      human:[{
        people:{
          name:'李思云',
          img:'QRBHS.jpg',
          onLine:false
        },
        details:[]
      },{
        people:{
          name:'老张',
          img:'test1.jpeg',
          onLine:false
        },
        details:[]
      }]
    }
  },
  methods:{
    goHome(name){
      this.$router.push({
          path: "./",
          query: {
              peopleName: name
          }
      })
    },
    retImg(i){
      if(i.onLine){
          return i.img
      }else{
          return require(`@/assets/images/${i.img}`)
      }
    }
  } 
}
</script>
.<style scoped lang="scss">
.about{
  background-color: pink;
  width: 100%;
  min-height: 100vh;
  position: relative;
  left: 0;
  top: 0;
}
.margbox{
  position: absolute;
  top:18vh;
  left: 10%;
  width: 80%;
  background-color: red;
  border-radius: 50px;
  display: flex;
  padding: 30px 0;
  .imgbox{
    width: 240px;
    height: 300px;
    border-radius: 50% 50%;
    overflow: hidden;
    margin: auto;
    img{
      width: 100%;
      height: 100%;
    }
  }
}
</style>